<template>
	<div class="uiue-card">
		<div class="tit">移动端灰度名单</div>
		<a-button type="primary" style="margin: 10px 10px" @click="exportList" :loading="uploading">下载</a-button>
		<a-upload :accept="fileType" :customRequest="importRoster" :showUploadList="false">
			<a-button :loading="uploading">导入名单</a-button>
		</a-upload>
		<a-table :dataSource="data.dataSource" :columns="columns" :loading="loading" :pagination="false" size="middle"
			bordered>
			<!-- <template #operation="{ record }">
				<a-popconfirm v-if="data.dataSource.length" title="确定删除?" @confirm="onDelete(record.grayscaleId)">
					<a>删除</a>
				</a-popconfirm>
			</template> -->
		</a-table>
		<div class="box-pagin">
			<a-pagination show-size-changer show-quick-jumper :show-total="(total) => `共 ${total} 条`"
				v-model:current="searchFormState.current" v-model:pageSize="searchFormState.size" :total="total"
				@change="pageNumberChange" />
		</div>
	</div>

</template>

<script setup name="grayList">
import grayscaleApi from '@/api/biz/grayscaleApi'
import tool from '@/utils/tool'
import { message } from 'ant-design-vue'
const datas = inject('editDate')

const fileType = '.xlsx,.xls'
const uploading = ref(false)
const loading = ref(false)
const props = defineProps({
	configKey: {
		type: String
	},
	isblack: {
		type: Boolean
	}
})

const config = [
	{ txt: 'pc', key: '1' },
	{ txt: 'app', key: '2' },
	{ txt: 'android', key: '3' },
	{ txt: 'ios', key: '4' },
	{ txt: 'umap', key: '5' }
]
// grayscaleType 名单类型 1黑名单 0灰名单
// appId 应用id
// propertyType 属性类型  pc，app，ios，android, umap
const params = computed(() => {
	return {
		grayscaleType: '0',
		appId: datas.appId || '',
		propertyId: datas.id,
		propertyType: config.find((v) => v.key === props.configKey).txt,
		upgrade: '' // 如果是升级传1
	}
})
// 列表搜索条件
let searchFormState = reactive({
	current: 1,
	size: 10,
	grayscaleAccounts: ''
})
let total = ref(0)


const currentName = inject('currentName')


const pageNumberChange = (page, pageSize) => {
	searchFormState.current = page
	searchFormState.size = pageSize
	loadData()
}
const loadData = () => {
	const cappId = tool.data.get('currentName') === '提交上线材料' ? '1' : '2'
	const obj = { ...searchFormState, ...params.value, cappId: cappId }
	loading.value = true
	grayscaleApi.getPage(obj).then((res) => {
		const { records, total: num } = res
		data.dataSource = records
		total.value = num
		loading.value = false
	})
}
const data = reactive({
	dataSource: []
})
const columns = [
	{
		title: '用户',
		dataIndex: 'grayscaleName',
		key: 'grayscaleName'
	},
	{
		title: '账号',
		dataIndex: 'grayscaleAccounts',
		key: 'grayscaleAccounts'
	},
	// {
	// 	title: '操作',
	// 	dataIndex: 'operation',
	// }
]
const onDelete = (grayscaleId) => {
	const arr = [{ grayscaleId }]
	grayscaleApi.remove(arr).then((res) => {
		searchFormState.current = 1
		searchFormState.size = 10
		loadData()
	})
}
const showModal = ref(false)
const add = () => {
	showModal.value = true
}
const handleOk = () => {
	showModal.value = false
}

const searchFormRef = ref()
// 下载模板
const downloadTemplate = () => {
	uploading.value = true
	grayscaleApi
		.getTemplate()
		.then((res) => {
			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
			const contentDisposition = res.headers['content-disposition']
			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
			const $link = document.createElement('a')
			$link.href = URL.createObjectURL(blob)
			$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
			$link.click()
			document.body.appendChild($link)
			document.body.removeChild($link) // 下载完成移除元素
			window.URL.revokeObjectURL($link.href) // 释放掉blob对象
			uploading.value = false
		})
		.catch(() => {
			uploading.value = false
		})
}
// 导入名单
const importRoster = (file) => {
	const form = new FormData()
	form.append('file', file.file)
	form.append('grayscaleType', params.value.grayscaleType)
	form.append('appId', params.value.appId)
	form.append('propertyType', params.value.propertyType)
	form.append('propertyId', params.value.propertyId)
	form.append('upgrade', params.value.upgrade)
	if (datas.appAccess.includes(',') && datas.appAccess.includes('1')) {
		// 服务端要求当前应用是双端（门户和移动端，传1）
		form.append('DoubleEnd', '1')
	}
	uploading.value = true
	grayscaleApi
		.importRoster(form)
		.then((res) => {
			console.log(res)
			// file.onSuccess(res, file.file)
			// file.status = 'done'
			searchFormState.current = 1
			searchFormState.size = 10
			loadData()
			uploading.value = false
		})
		.catch(() => {
			uploading.value = false
		})
}
// 下载名单
const exportList = () => {
	if (data.dataSource.length == 0) {
		message.warning('数据不存在，无法下载')
		return
	}
	uploading.value = true
	grayscaleApi
		.exportList(params.value)
		.then((res) => {
			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
			const contentDisposition = res.headers['content-disposition']
			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
			const $link = document.createElement('a')
			$link.href = URL.createObjectURL(blob)
			$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
			$link.click()
			document.body.appendChild($link)
			document.body.removeChild($link) // 下载完成移除元素
			window.URL.revokeObjectURL($link.href) // 释放掉blob对象
			uploading.value = false
		})
		.catch(() => {
			uploading.value = false
		})
}
</script>

<style lang="less" scoped>
.btns {
	color: var(--primary-color);
	border-color: var(--primary-color);
	margin-top: 24px;
}

.box-pagin {
	margin-top: 24px;
	text-align: right;
}
</style>
